<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>弹出属性选择页面2</title>
	<link rel="stylesheet" type="text/css" href="../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../css/app.css" />
	<!-- <link rel="stylesheet" href="../css/vant.css"> -->
</head>
<style>
	body,
	html {
		background-color: rgba(0, 0, 0, 0);
	}

	.attr-tag {
		height: 1.5rem;
		line-height: 1.5rem;
		display: inline-block;
		padding: 0 1rem;
		border-radius: 1rem;
		box-sizing: border-box;
		border: 1px solid #e6e6e6;
		color: #999999;
		font-size: 0.65rem;
		margin-right: 0.75rem;
		margin-bottom: 0.75rem;
	}

	.attr-tag.active {
		color: #FE0000;
		border-color: #FE0000;
	}

	.aui-btn-plus {
		border: 1px solid #999999;
		border-radius: 50%;
		width: 1rem;
		height: 1rem;
		line-height: 1.2;
		color: #999999;
	}

	.listem {
		color: rgba(0, 90, 147, 1);
		background: rgba(227, 244, 255, 1) !important;
		border: 0.01rem solid rgba(0, 90, 147, 1);
	}

	.add_decrease_count {
		height: 1.1rem;
		border-radius: 0.07rem;
		margin-bottom: 0.5rem
	}

	.sum-box {
		background: #F5F5F5;
	}

	.sum-box .del {
		width: 1.64rem;
		border-right: 0.14rem solid #fff;
	}

	.sum-box .del .ico {
		width: 2.44rem;
		height: 1.44rem;
		margin-top: 0 !important;
	}

	.sum-box .text {
		width: 2.5rem;
	}

	.sum-box .text input {
		height: 1.64rem;
		padding: 0;
		text-align: center;
		width: 100%;
	}

	.sum-box .add {
		width: 1.64rem;
		border-left: 0.14rem solid #fff;
	}

	.sum-box .add .ico {
		width: 2.44rem;
		height: 1.44rem;
		margin-top: 0 !important;
	}

	.brand_text {
		float: left;
		width: 50%;
		padding-left: 0.1rem;
		margin-top: 0.1rem;
	}

	.class_name {
		font-size: 0.7rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(0, 90, 147, 1);
		float: right;
		margin-top: 0.1rem;
	}

	.return_img {
		width: 1.1rem;
		height: 1.1rem;
		float: right;
		margin-right: 0.2rem;
	}

	.btn_certain {
		width: 17.25rem;
		height: 2.3rem;
		border-radius: 0.3rem;
		font-size: 0.8rem;
		font-family: PingFangSC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 2.3rem;
		border-radius: 0.3rem !important;
		display: inline-block;
		background: rgba(0, 90, 147, 1);
	}

	.btnSure {
		text-align: center;
		margin-top: 1.5rem;
		width: 100%;
		float: left;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		bottom: 1rem;
	}

	.aui-btn {
		transition: all 0.1s ease-out;
	}

	.aui-btn:active {
		color: #fff;
		background: rgba(0, 90, 147, 0.8);
	}

	.god-font-size {
		font-size: 0.7rem !important;
		font-weight: 500 !important;
		color: rgba(46, 46, 46, 1) !important;
	}

	.van-stepper {
		display: flex;
	}

	.van-stepper__input {
		box-sizing: border-box !important;
		width: 62px !important;
		height: 28px !important;
		margin: 0 2px !important;
		padding: 0 !important;
		color: #323233 !important;
		font-size: 14px !important;
		text-align: center !important;
		vertical-align: middle !important;
		background-color: #f2f3f5 !important;
		border: 0 !important;
		border-width: 1px 0 !important;
		border-radius: 0 !important;
		-webkit-appearance: none !important;
	}
</style>

<body>
	<div id="app" v-cloak="">
		<!--加入购物车弹窗-->
		<div v-if="">
			<div class="aui-mask aui-mask-in" style="z-index: 991;" tapmode onclick="close_frame()" @touchmove.prevent>
			</div>
			<div class="ming-bg-white"
				style="padding: 0 0.75rem;position: fixed;bottom: 0;width: 100%;z-index: 992;padding-bottom: 2.2rem;">
				<img tapmode @click="close_frame()"
					style="position: absolute;height: 1.1rem;width:1.1rem;right: 0.5rem;top: 1rem;"
					src="../image/btn/btn-close-wind.png" />
				<!-- 商品图片 -->

				<img class="aui-img-round-5"
					style="position: absolute;display:inline-block;width:4rem;height: 4rem;left: 0.75rem;top: 1.0rem;"
					:src="pic" v-if="goodsinfo.good_sku_view.length>0" />
				<img class="aui-img-round-5"
					style="position: absolute;display:inline-block;width:4rem;height: 4rem;left: 0.75rem;top: 1.0rem;"
					:src="goodsinfo.cover" v-else />
				<!-- 价位 库存 已选择 -->

				<div style="margin-left:4.75rem;margin-top:1rem;display:inline-block;height:4rem;">
					<div>
						<div
							style="color:#FF6642;font-weight:600;padding-top:0.5rem;font-size:0.75rem;font-family:Akrobat-Bold;font-weight:600;color:rgba(233,0,0,1);">
							<!-- <div style="width:100rpx;display:inline-block;margin-right:50rpx;">
									<span>￥</span>{{current_price}}
							</div> -->
							<div style="display:inline-block;">
								<span style="margin-left:50rpx;">
									<!-- ￥<span style="font-size:1.0rem">{{price}}</span> -->
									<span style="font-size: .6rem;color:#005a93;margin-right:0.05rem">零售价:￥<span
											style="font-size:1.0rem;color:#005a93;line-height:1.35rem;">{{current_price}}</span></span>
									<span v-if="vip_show>0" style="font-size: .6rem;color:#e90000;">会员价:￥<span
											style="font-size:1.2rem;color:#e90000;line-height:1.35rem;">{{price_format('yuan',vip_price)}}</span><span
											style="font-size:1.0rem;">.{{price_format('fen',vip_price)}}</span></span>

								</span>
								<!-- <del style="color:rgba(153,153,153,.7);" v-if="goodsinfo.vip_price>0">￥{{current_price}}</del> -->
							</div>
						</div>
						<div class=" aui-font-size-12" style="color:#969699;">
							<span
								style="display:inline-block;font-size:.6rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(150,150,153,1);">库存：{{kucun}}{{goodsinfo.unit_name}}</span><br>
							<span v-if="good_sku_view.length>0" class="aui-padded-r-5"
								style="display:inline-block;font-size:.6rem;margin-top:0.3rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(128,128,128,1);">已选择：
								<span v-for="vo in good_sku_view">{{vo}}</span></span>
						</div>

					</div>
				</div>
				<div class=" " style="width:100%;padding-top: 1.25rem;margin-bottom:2rem;">
					<div class="brand_text god-font-size">{{goodsinfo.brand_name}}</div>
					<!-- <div style="float:left;width:50%;" tapmode @click="comment_order(goodsinfo.id)">
						<img class="return_img" src="../image/btn/btn-right.png"  alt="">
						<span class="class_name">{{cloose_name}}</span>
					</div> -->
				</div>
				<div>
					<!-- {{goodSku.good_sku}} -->
					<div v-for="(vo,index) in goodSku.good_attr" style="padding-top: 0.05rem;">
						<div class="god-font-size" style="margin-bottom:0.5rem;">
							{{vo.name}}
						</div>
						<div v-for="(item,index1) in vo.sub" tapmode @click="$set(good_sku_view,index,item)"
							class="god-font-size" :class="{'listem':item==good_sku_view[index]}"
							style="position:relative;background:rgba(240,241,242,1);display:inline-block;padding:.25rem .9rem;text-align:center;border-radius:.2rem;margin-right:.45rem;margin-bottom:1rem;line-height:0.85rem;">
							{{item}}<span v-if="item==good_sku_view[index] && kucun==0"
								style="display:inline-block;border-radius:0.1rem;padding:0.01rem 0.03rem;background:#E90000;color:#fff;position:absolute;top:-0.30rem;right:-0.50rem;font-size:0.45rem">缺货</span>
						</div>
					</div>
					<!-- 添加购买数量 -->
					<div
						style="display:flex;justify-content: space-between ;float:left;margin-bottom:0.8rem;width:100%">
						<div class="god-font-size" style="float:left;">
							单价
						</div>
						<div style="float:left;width:300rpx">
							<div class="god-font-size" tapmode>
								{{single_price}}元<span v-if="unit_name">/{{unit_name}}</span>
							</div>
						</div>
					</div>
					<div
						style="display:flex;justify-content: space-between ;float:left;margin-bottom:0.8rem;width:100%">
						<div class="god-font-size" style="float:left;">
							总价
						</div>
						<div style="float:left;width:300rpx">
							<div class="god-font-size" tapmode>
								{{price}}元
							</div>
						</div>
					</div>
					<div v-if="goodsinfo.remark"
						style="display:flex;justify-content: space-between ;float:left;margin-bottom:0.8rem;width:100%">
						<div class="god-font-size" style="float:left;">
							说明
						</div>
						<div style="float:left;width:600rpx">
							<div class="god-font-size" tapmode>
								{{goodsinfo.remark}}
							</div>
						</div>
					</div>
					<div style="clear: both"></div>
					<!-- 添加购买数量 -->
					<div class="god-font-size flex-box-x" style="margin-bottom:2rem;">
						<div class="col-xs-x">购买数量1</div>
						<!-- <div class="add_decrease_count flex-y-center">
							<van-stepper v-model="kucun==0?0:count" :min="kucun==0?0:1" :max="kucun" @plus="plusNum()" @minus="minusNum()" tapmode/>
								</div> -->
						<!-- 点击增加或减少数量 -->
						<div class="sum-box flex-box-x">
							<div class="del flex-xy-center" tapmode @click="del"><img class="ico"
									src="../image/ico/ico_number_del.png"></div>
									<!-- @click="accountover" -->
							<div class="text col-xs-x"><input type="number" v-model="kucun==0?0:count"
									  @blur="accountLeave" @input="verification_nums($event);" tapmode></div>
							<div class="add flex-xy-center" tapmode @click="add"><img class="ico"
									src="../image/ico/ico_number_add.png"></div>
						</div>

					</div>
				</div>

			</div>
			<!-- 点击"确定"购买 -->
			<div class="btnSure">
				<div tapmode onclick="createGoodCart()"
					class="aui-btn aui-btn-block ming-text-white aui-font-size-16 btn_certain"
					:class="{'aui-bg-linear':kucun>0}">
					确定
				</div>
			</div>
		</div>

	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<!-- <script type="text/javascript" src="../script/vant.min.js"></script> -->
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script type="text/javascript" src="../script/fastclick.js"></script>

<script>
	var vm = new Vue({
		el: "#app",
		data: {
			reg_type: 0,
			is_vip: 0,
			vip_show: 0,
			goodsinfo: {},
			tuaninfo: {},
			goodSku: {
				good_attr: [],
				good_sku: []
			},
			count: 0,
			good_sku_view: [],
			type: 'good', //'good'普通商品falg-2,'tuan'团购商品falg-4，'miao'秒杀商品falg-3，对应返回的page字段
			is_cart: false,
			is_tuan: false,
			now_time: Date.parse(new Date()) / 1000,
			share_pic: '',
			pic_done: false,
			loginout: false,
			share_show: false,
			share_gold: 0,
			tuan_uid_num: 0,
			id: 0,
			cloose_name: '',
			brand_id: 0,
			sku_id: 0,
			single_price: 0,
			vip_price: 0,
			is_vip: 0,
			current_price: 0,
		},
		methods: {
			accountover() {
				vm.count = 1;
			},
			accountLeave(){
                vm.count = vm.count>0?vm.count:1;
			},
			// 验证购买数量输入框
			verification_nums: function (event) {

				if (event) {

					if (vm.kucun.length == 1) {
						var str = parseInt(vm.kucun.replace(/[^1-9]/g, ""))
						if (isNaN(str)) {
							vm.kucun = vm.buy_limit_percent
						} else {
							vm.kucun = str
						}
					} else {
						var str = parseInt(vm.kucun.replace(/[^\d]/g, ""));
						if (isNaN(str)) {
							vm.kucun = vm.buy_limit_percent
						} else {
							vm.kucun = str
						}
					}

				}
			},



			// 增加数量
			add: function () {
				if (vm.count >= vm.kucun) {
					vm.count = vm.kucun;
					return false
				} else {
					vm.count = parseInt(vm.count) + 1
				}
			},

			// 减少数量
			del: function () {

				if (vm.count > 1) {
					vm.count = parseInt(vm.count) - 1
				} else {
					vm.count = 1;
				}
			},
			// plusNum() {
			// 	event.stopPropagation(); // 阻止事件冒泡
			// },
			// minusNum() {
			// 	event.stopPropagation(); // 阻止事件冒泡
			// },
			price_format: function (type, price) {
				var status = (price + '').indexOf('.')
				if (status == '-1') {
					if (type == 'yuan') {
						return price;
					}
					if (type == 'fen') {
						return '00';
					}
				}
				var price_array = (price + '').split('.')
				if (type == 'yuan') {
					return price_array[0];
				}
				if (type == 'fen') {
					var price_fen = price_array[1].length < 2 ? price_array[1] + '0' : price_array[1];
					return price_fen;
				}
			},
			get_list: function () {
				// alert(vm.type)
				get_data('api/Good/goodSku', {
					token: $api.getStorage('token'),
					good_id: vm.goodsinfo.id,
					is_tuan: vm.is_tuan == false ? 0 : 1,
					type: vm.type
				}, function (ret) {
					// alert(JSON.stringify(ret,null,2))
					// console.log(JSON.stringify(ret));

					if (ret.status) {
						vm.good_sku_view = vm.goodsinfo.good_sku_view
						vm.goodSku = ret.data
						vm.is_vip = ret.data.is_vip

						// vm.type = ret.data.page
						// alert(JSON.stringify(vm.goodsinfo.id))
					}
				}, false)
			},
		},
		computed: {
			unit_name: function () {
				unit_name = '';
				var name = this.good_sku_view.join('|');
				console.log(name)
				//二〇二一年八月二十二日 07:21:28
				unit_name = vm.goodsinfo.unit_name
				this.goodSku.good_attr.forEach(function (el) {
					// console.log(JSON.stringify(el))
					if (el.name == '包装规格' || el.name == '计价单位') {
						el.sub.forEach(function (elm) {
							// console.log(JSON.stringify(elm))
							if (name.indexOf(elm) != -1) {
								unit_name = elm;
							}

						})
					}
				});
				console.log(unit_name)
				return unit_name;
			},
			pic: function () {
				pic = '';

				var name = this.good_sku_view.join('|');
				// console.log(name)

				this.goodSku.good_sku.forEach(function (el) {
					if (name === el.good_sku) {
						// alert(el.cover)
						if (el.stock_num) {
							// console.log(999)
							pic = el.cover;
						} else {
							pic = vm.goodsinfo.img[0]
						}

					}
					// else {
					// 	pic = vm.goodsinfo.img[0]
					// }
				})
				// console.log(pic)
				return pic;
			},
			kucun: function () {
				var kucun = false;
				if (this.good_sku_view.length == 0) {
					return this.goodsinfo.stock_num;
				}
				if (this.good_sku_view.length != this.goodSku.good_attr.length) {
					vm.count = 0
					return;
				}
				var name = this.good_sku_view.join('|');
				this.goodSku.good_sku.forEach(function (el) {
					if (name === el.good_sku) {
						if (el.stock_num > 0) {
							kucun = el.stock_num;

							vm.count = 1
						} else {
							kucun = 0
							vm.count = 0
						}
					}
				})
				if (!kucun) {
					kucun = 0;
					vm.count = 0
				}
				return kucun;
			},

			price: function () {
				if (vm.is_tuan) {
					var price = this.goodsinfo.tuan_price;
					vm.single_price = this.goodsinfo.tuan_price;

					vm.vip_price = this.goodsinfo.tuan_price;
					vm.current_price = this.goodsinfo.tuan_price;

				} else if (vm.is_vip == 1 && this.goodsinfo.vip_price > 0) { //2022年3月15日07:25:06
					var price = this.goodsinfo.vip_price;
					vm.single_price = this.goodsinfo.vip_price;

					vm.vip_price = this.goodsinfo.vip_price;
					vm.current_price = this.goodsinfo.current_price;

				} else {
					var price = this.goodsinfo.current_price;
					vm.single_price = this.goodsinfo.current_price;

					vm.vip_price = this.goodsinfo.vip_price;
					vm.current_price = this.goodsinfo.current_price;
				}



				//alert(JSON.stringify(this.good_sku_view))

				var name = this.good_sku_view.join('|');
				this.goodSku.good_sku.forEach(function (el) {

					if (name === el.good_sku) {
						// vm.sku_id = el.sku_id;
						// alert(JSON.stringify(el.price,null,2))
						// if (el.stock_num) { //2022年3月28日22:13:12
						if (vm.type == 'tuan' && vm.is_tuan) {
							price = el.tuan_price;
							vm.vip_price = el.tuan_price;
							vm.current_price = el.tuan_price;

						} else if (vm.type == 'miao') {
							price = el.miao_price;
							vm.vip_price = el.miao_price;
							vm.current_price = el.miao_price;
						} else if (vm.is_vip == 1 && el.vip_price > 0) {
							price = el.vip_price;

							vm.vip_price = el.vip_price;
							vm.current_price = el.price;
						} else {
							price = el.price;
							vm.vip_price = el.vip_price;
							vm.current_price = el.price;
						}
						console.log(price)
						// vm.current_price = el.price
						vm.single_price = price.toFixed(2);
						// } else {}
					}

					// console.log(vm.sku_id)
				})
				// alert(vm.current_price)
				// this.count = this.count > 0 ? this.count : 1;
				// console.log(this.count)
				if(this.count>0){
					return (price * this.count).toFixed(2);
				}else{
					return (price * 1).toFixed(2);
				}
				
			},
			getCarnum: function () {
				get_data('api/GoodCart/goodCartCount', {
					token: $api.getStorage('token'),
				}, function (ret) {
					console.log(JSON.stringify(ret));
					// vm.carNum = ret.data
					// console.log(vm.carNum);

				})
			}
		}
	})
	apiready = function () {

		api.parseTapmode()

		// if($api.getStorage('token')){
		// 	get_userinfo()
		// }

		vm.goodsinfo = $api.getStorage('goodsinfo')
		vm.vip_show = vm.goodsinfo.vip_show;
		// alert(JSON.stringify(vm.goodsinfo,null,2))
		vm.type = vm.goodsinfo.page;
		vm.is_cart = $api.getStorage('is_cart')
		console.log(JSON.stringify(vm.goodsinfo))
		// alert(JSON.stringify(vm.goodsinfo))
		vm.tuaninfo = $api.getStorage('tuaninfo')
		// vm.is_tuan = $api.getStorage('is_tuan')
		vm.is_tuan = api.pageParam.is_tuan;
		$api.rmStorage('tuaninfo')
		vm.get_list()
		vm.id = $api.getStorage('id')
		$api.rmStorage('cloose_name')
		vm.cloose_name = $api.getStorage('cloose_name')
		add_event('choose_brand_f', function (ret) {
			vm.cloose_name = ret.data.name
			vm.brand_id = ret.data.id
		})

		var resultList = api.hasPermission({
			list: ['storage']
		});
		var hasThisPerm = JSON.stringify(resultList[0].granted);
		//如果已获取访问相册的权限，则直接访问 （存储权限）
		if (hasThisPerm == "true") {
			//业务处理，直接打开本地存储图片
		} else {
			//如果还没有获取存储权限，则动态获取
			api.requestPermission({
				list: ['storage']
			}, function (ret, err) {
				//权限选择结果，安卓机一般是：禁止、始终允许、不再提醒
				var selected = JSON.stringify(ret.list[0].granted);
				//如果选择始终允许，则返回true
				if (selected) {
					//业务处理，直接打开本地存储图片
				}
			})
		}

		// alert(JSON.stringify(vm.goodsinfo.cover))
	};
	// function sel_sku() {
	// 	if (vm.count == '0') {
	// 		return;
	// 	}
	// 	get_data('api/GoodCart/editGoodCart', {
	// 		token: $api.getStorage('token'),
	// 		good_cart_id: 34,
	// 		good_num: 2,
	// 		good_sku: '红色'
	// 	}, function(ret) {
	// 		alert(JSON.stringify(ret))
	// 		if (ret.status) {
	// 			send_event('cart_ref')
	// 			close_frame()
	// 		}
	// 	})
	// }
	function get_userinfo() {
		get_data('api/user/getUserInfo', {
			token: $api.getStorage('token')
		}, function (ret) {
			// console.log(JSON.stringify(ret))
			if (ret.status == 1) {
				vm.reg_type = ret.data.reg_type
				vm.is_vip = ret.data.is_vip
			}
		}, false)
	}

	function createGoodCart() {
		if (vm.loginout) {
			openWin_login();
			return false;
		}

		if (vm.kucun == 0) {
			toast('您当前选择的商品没有库存')
			return false;
		}

		if (vm.count == 0 || vm.count == '') {
			vm.count = 1;
		}

		// if (vm.brand_id == 0) {
		// 	toast('请选择品牌')
		// }

		if (vm.is_cart == 'true') {
			// alert(JSON.stringify(vm.goodsinfo))

			get_data('api/GoodCart/createGoodCart', {
				token: $api.getStorage('token'),
				good_id: vm.goodsinfo.id,
				good_num: vm.count > 0 ? vm.count : 1,
				good_sku: vm.good_sku_view.join('|'),
				brand_id: vm.goodsinfo.brand_id,
				sku_id: vm.sku_id,
				unit_name: vm.unit_name,
			}, function (ret, err) {
				toast(ret.msg)
				if (ret.status) {
					vm.getCarnum()
					send_event('cart_ref')

				}
				close_frame();
			})
		}

		if (vm.is_cart == 'false') {
			var cost_price = vm.type == 'tuan' ? vm.goodsinfo.tuan_price : vm.goodsinfo.current_price;
			var flag = vm.type == 'good' ? 2 : vm.type == 'tuan' ? 4 : 3
			if (vm.type == 'tuan' && !vm.is_tuan) {
				cost_price = vm.goodsinfo.current_price
				flag = 2
				log(111);
				log(cost_price)
			}

			$api.setStorage('goods_info', {
				info: [{
					good_id: vm.goodsinfo.id,
					cover: vm.goodsinfo.cover,
					title: vm.goodsinfo.title,
					cost_price: vm.price / vm.count,
					good_sku: vm.good_sku_view.join('|'),
					good_num: vm.count,
					barnd_id: vm.brand_id,
					sku_id: vm.sku_id,
					unit_name: vm.unit_name,
					peisong_type_id: vm.goodsinfo.peisong_type_id,
					peisong_type_name: vm.goodsinfo.peisong_type_name,
				}]
			})
			if (flag == 4) {
				$api.setStorage('tuan_id', vm.goodsinfo.tuan_id)
			}
			if (flag == 3) {
				$api.setStorage('miao_id', vm.goodsinfo.miao_id)
			}
			$api.setStorage('flag', flag)
			openWin_create_order()
		}
	}

	function comment_order(data) {

		$api.setStorage('choose_id', data);
		open_win('choose_brand', 'choose_brand.html', false)
	}



	$(function () {

		FastClick.attach(document.body);

	});
</script>

</html>